import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { List, InputItem, Button } from 'antd-mobile'
import BindBankCardVM from 'cvm/bindBankCard/bindBankCard'
import './bindBankCard.less'

const BindBankCardList = observer(({ vm }) => {
  const bankInfo = vm.props.history.location.state
  console.log(bankInfo)
  return (
    <div className='bind-card'>
      <p className='information-title'>银行卡信息</p>
      <List style={{ backgroundColor: 'white' }} className='picker-list' >
        <div className={bankInfo ? 'bankInfoStyle' : ''}>
          <List.Item
            extra={bankInfo ? bankInfo.BankName : '选择开户银行'}
            arrow='horizontal'
            onClick={() => vm.handleChooseBank()}
          >
            开户银行
        </List.Item>
        </div>
        <InputItem
          placeholder='银行卡卡号'
          clear
          type='bankCard'
          maxLength='23'
          onChange={(v) => vm.onChange(v, 'BankCard')}
        >卡号</InputItem>
        <InputItem
          placeholder='持卡人姓名'
          clear
          maxLength='8'
          onChange={(v) => vm.onChange(v, 'UserName')}
        >持卡人</InputItem>
      </List>
      <div className='btn-box'>
        {
          bankInfo ? <Button type='primary' onClick={() => vm.handleBindBackCard(bankInfo.BankCode, bankInfo.BankIcon, bankInfo.BankName)}>保存</Button>
          : <Button type='primary' onClick={() => vm.handleBindBackCard()}>保存</Button>
        }
      </div>
    </div>
  )
})

@observer
class bindBankCard extends Component {
  constructor (props) {
    super(props)
    window.document.title = '绑定银行卡'
    this.vm = new BindBankCardVM(props)
  }
  render () {
    return (
      <div>
        <BindBankCardList vm={this.vm} />
      </div>
    )
  }
}

export default bindBankCard
